<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="信访码查询"></uni-navbar></view>

		<view class="filter-box">
			<view class="form-box">
				<u-form :model="form" ref="uForm">
					<u-form-item class="form-item" label="信访码" prop="queryCode">
						<!-- block -->
						<u-input v-model="form.queryCode" type="text" placeholder="请输入信访码" />
					</u-form-item>
				</u-form>
				<view class="tip" @click="navTo('/pagesB/petition/find')">找回信访码</view>
			</view>
			<view class="fiexd-btm"><u-button class="form-btn" type="error" shape="circle" @click="filter">查询</u-button></view>
		</view>

		<view class="com-h2" v-if="infoList.length > 0"><text class="h2-title">查询出的信访问题</text></view>

		<view class="list-box">
			<view class="list-info_17" v-for="(item, index) of infoList" :key="item.id" @click="navTo('/pagesB/petition/detail?id=' + item.id)">
				<view class="info-index">信访问题{{ index + 1 }}</view>
				<view class="info-flex">
					<view class="info-label">信访标题：</view>
					<view class="info-value clamp2">{{ item.title }}</view>
				</view>
				<view class="info-flex">
					<view class="info-label">信访查询码：</view>
					<view class="info-value clamp">{{ item.queryCode }}</view>
				</view>
				<view class="info-btm">
					<view class="text">{{ `查看详情` }}</view>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
			</view>
		</view>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			scrollTop: 0,
			colorMap: {
				0: '#ff9900',
				1: '#19be6b',
				2: '#0099ff',
				3: '#e5231a'
			},
			title: '',
			infoList: [],

			form: {
				queryCode: '',
				idCard: '',
				phone: ''
			},

			rules: {
				queryCode: [
					{
						required: true,
						message: '请输入信访码',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号不正确',
						trigger: 'change'
					}
				],
				idCard: [
					{
						required: true,
						message: '请输入身份证',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证不正确',
						trigger: 'change'
					}
				]
			},

			param: {
				isRead: '',
				nodeStatus: '',
				title: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad() {
		this.loadLogin();
		// this.loadData();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.roleCodes = this.userInfo.roleCodes.join(',');
			} else {
				this.$logout();
			}
		},
		loadData() {
			let url = '/wangshangxinfang/petition-letter/detail';
			let data = {
				...this.form
			};

			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.infoList.push(res.data);
			});
		},
		filter(e) {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				} else {
					this.infoList = [];
					this.loadData();
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.list-box {
}

.filter-box {
	background-color: #fff;
}

.com-h2 {
	background-color: inherit;
}

.form-box {
	.form-item {
		@include mp-flex;
	}

	.tip {
		margin-left: auto;
		padding: 26rpx 30rpx;
		width: 300rpx;
		text-align: right;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
